<template>
  <div>
    <van-nav-bar
    fixed
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-list>
    <!-- <van-cell v-for="item in orderList" :key="item.id" :title="item.cost" /> -->
    <div v-for="item in orderList" :key="item.id" class="item">
      <p>商品数：{{item.cartInfo.length}} 花费 {{item.cost}}元</p>
      <p>货运状态：{{item._status._msg}}</p>
    </div>
  </van-list>
  </div>
</template>


<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOrderList } from '@/api/order'

// 订单列表
const orderList = ref([])

onMounted(async () => {
  try {
    const { data } = await getOrderList()
    orderList.value = data.data
  } catch {
    orderList.value = []
  }
})

const router = useRouter()
const onClickLeft = () => {
  router.back()
}
</script>

<style scoped>
.van-list {
  padding: 10px;
  padding-top: 50px;
}
.item {
  font-size: 16px;
  padding: 5px;
  height: 45px;
  margin-bottom: 5px;
  border: 1px solid #f7f7f7;
}
</style>